<template>
  <CategorySelector :isShow="!isShowAttrList"></CategorySelector>
  <!-- table数据表格 -->
  <div v-if="isShowAttrList">
    <el-card>
      <el-button
        type="primary"
        :icon="Plus"
        :disabled="!categoryStore.category3Id"
        @click="addAttrData"
        >添加属性</el-button
      >
      <el-table :data="attrList" border style="width: 100%; margin-top: 10px">
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column prop="attrName" label="属性名称" width="180" />
        <el-table-column prop="address" label="属性列表">
          <template v-slot="{ row }">
            <el-tag
              v-for="attrValue in row.attrValueList"
              :key="attrValue.id"
              class="ml-2"
              type="success"
              style="margin-right: 6px"
              >{{ attrValue.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row, $index }">
            <el-button
              :icon="Edit"
              type="primary"
              @click="toEditAttr(row, $index)"
            ></el-button>
            <el-button
              :icon="Delete"
              type="danger"
              @click="deleteAttrData(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <div v-else>
    <el-card>
      <el-form>
        <el-form-item label="属性名" style="width: 300px">
          <el-input
            placeholder="请输入属性名"
            width="200px"
            v-model="attrInfo.attrName"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAttrValue">添加属性值</el-button>
          <el-button type="default" @click="isShowAttrList = true">取消</el-button>
        </el-form-item>
      </el-form>
      <el-table border :data="attrInfo.attrValueList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="属性值名称">
          <template v-slot="{ row, $index }">
            <el-input
              v-model="row.valueName"
              v-if="row.isShowAttrValue"
              ref="refInput"
              @blur="deleteInput(row, $index)"
            ></el-input>
            <span
              v-else
              @dblclick="toEditAttrValue(row, $index)"
              style="display: inline-block; width: 100%"
              >{{ row.valueName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            @click="deleteAttrValue(row, $index)"
          ></el-button>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="saveAttrInfo">保存</el-button>
      <el-button type="default" @click="isShowAttrList = true">取消</el-button>
    </el-card>
  </div>
</template>

<script lang="ts">
export default { name: "Attr" };
</script>
<script lang="ts" setup>
import CategorySelector from "@/components/CategorySelector/index.vue";
import {
  reqGetAttrListData,
  reqDeleteAttrListData,
  reqAddOrUpdateAttrInfo,
} from "@/api/product/attr";
import { useCategoryStore } from "@/stores/categoryList";
import { ref, onMounted, watch, reactive, nextTick } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import LogoVue from "@/layout/components/Sidebar/Logo.vue";

//创建stores对象
const categoryStore = useCategoryStore();

// 创建变量接受数据
const attrList = ref([]);

// 表格是否呈现变量
const isShowAttrList = ref<boolean>(true);
// const isShowCategory = ref<boolean>(true);

//获取输入框的真实dom
const refInput = ref<HTMLInputElement>();
// console.log("输入框dom", input);

// 为要添加属性时发送请求预备的参数格式
const attrInfo = reactive({
  attrName: "",
  attrValueList: [],
  categoryLevel: 3, //导航等级 固定值
  categoryId: -1, //三级导航id
});

// 添加属性页面中 添加属性值按钮逻辑
const addAttrValue = () => {
  attrInfo.attrValueList.push({
    attrId: attrInfo.id,
    valueName: "",
    // 是否显示输入框
    isShowAttrValue: true,
  });

  nextTick(() => {
    //自动获取焦点
    refInput.value?.focus();
  });
};

// 包装发送请求函数
const getAttrListData = async () => {
  // 发送请求
  attrList.value = await reqGetAttrListData({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id,
  });

  // console.log("表格数据呈现", attrList.value);
};

// 点击添加属性按钮之后的逻辑
const addAttrData = () => {
  // 切换页面
  isShowAttrList.value = false;
  // isShowCategory.value = false;
  // 先清空添加表单中信息
  attrInfo.attrName = "";
  attrInfo.attrValueList = [];

  // 清除id 因为区分修改还是添加是用id来判断的
  delete attrInfo.id;
};

// 表格删除按钮功能 有消息气泡
const deleteAttrData = (id: number) => {
  ElMessageBox.confirm("确定要删除此条数据?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 成功时发送请求删除数据

      await reqDeleteAttrListData(id);
      //重新发送请求获取数据渲染页面
      getAttrListData();
      ElMessage({
        type: "success",
        message: "删除数据成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除数据失败",
      });
    });
};

// 当输入框没有值时删除当前项
const deleteInput = (row: any, index: number) => {
  //
  if (!row.valueName) {
    // 清除数组中当前项
    attrInfo.attrValueList.splice(index, 1);
    return;
  }
  //隐藏输入框
  row.isShowAttrValue = false;
};

// 双击修改属性值列表中的数据
const toEditAttrValue = (row: any, index: number) => {
  //显示输入框
  row.isShowAttrValue = true;

  nextTick(() => {
    //自动获取焦点
    refInput.value?.focus();
  });
};

// 属性值列表删除按钮
const deleteAttrValue = (row: any, index: number) => {
  ElMessageBox.confirm("是否删除该条属性值", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 清除数组中当前项
      attrInfo.attrValueList.splice(index, 1);

      ElMessage({
        type: "success",
        message: "删除属性值成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

// 点击按钮添加属性发送请求到服务器,天机属性和属性值
const saveAttrInfo = async () => {
  // 添加属性需要三级导航id
  attrInfo.categoryId = categoryStore.category3Id;
  // 发送请求
  await reqAddOrUpdateAttrInfo(attrInfo);
  ElMessage.success("添加属性成功");

  // 重新渲染页面
  getAttrListData();
  // 显示到属性名称列表
  isShowAttrList.value = true;
};

// 编辑按钮
const toEditAttr = async (row: any, index: number) => {
  // 显示修改列表2
  isShowAttrList.value = false;

  // 将当前项信息赋值给发送请求所需参数中
  Object.assign(attrInfo, row);
};

// 当检测到三级导航id变化发送请求获取表格数据
watch(
  () => categoryStore.category3Id,
  async (category3Id) => {
    if (!category3Id) {
      // 当没有三级导航时不显示table数据
      attrList.value = [];
      return;
    }
    //发送请求获取table数据
    // console.log("cca", category3Id);
    getAttrListData();
    ElMessage.success("发送请求成功");
  },
  { immediate: true }
);
</script>
<style></style>
